<script lang="ts">
// 这里添加一个 Home，其目的是让 keepalive 缓存该组件
export default {
  name: 'Home'
}
</script>
<script setup lang="ts">
import { getBannerList, getNavList, getProList } from '@/api/home'
import { onMounted, ref, onActivated, onDeactivated } from 'vue'
// 这里解构出的 Ref 是用来给 ref 创建数据添加类型用的
import type { Ref } from 'vue'
// 如果在 script 中添加了 setup，那么导入组件后会自动注册组件
import ProList from '@/components/ProList.vue'




interface iBanner {
  alt: string
  bannerid: string
  flag: boolean
  img: string
  link: string
}

// 创建一个变量叫 bannerList，其类型是 Ref 类型，
// 内部有一个数组，数组内是 iBanner 类型的对象
const bannerList: Ref<iBanner[]> = ref([])

interface iNav {
  imgurl: string
  navid: number
  title: string
}
// 显示宫格布局
const navList: Ref<iNav[]> = ref([])

interface iPro {
  img1: string
  originprice: number
  proname: string
  proid: string
}
const proList: Ref<iPro[]> = ref([])

// 组合式 API 中的挂载之后的回调函数
onMounted(() => {
  // 发送数据请求获取轮播图数据
  getBannerList().then(res => {
    // console.log(res.data);
    bannerList.value = res.data.data
  })

  // 获取宫格布局的数据
  navList.value = getNavList()

  // getProList({}).then(res => {
  //   // console.log(res);
  //   proList.value = res.data.data
  // })
})

// --------------------- 上拉加载更多 ------------------------
// 标记是否正在加载中
const loading: Ref<boolean> = ref(false)
// 标记是否加载完毕
const finished: Ref<boolean> = ref(false)
// 标记当前在哪一页
const count: Ref<number> = ref(1)
function onLoad() {
  // 当滑动到底部的时候会调用该方法来加载更多的数据
  // 先标记正在加载中
  loading.value = true


  getProList({ count: count.value }).then(res => {


    if (res.data.data.length == 0) {
      // 没有更多数据了
      finished.value = true
    } else {
      // console.log(res.data.data);
      proList.value = [...proList.value, ...res.data.data]
      // 标记页码为下一页
      count.value++
      // 标记当前加载结束
      loading.value = false
    }


  })
}

// ----------------- 点击回到顶部 ----------------------
// 记录当前滚动距离
const scrollTopNum: Ref<number> = ref(0)
// 获取页面滚动距离用的
function scrollTop(event: any) {
  // 获取滚动距离
  // console.log(event.target.scrollTop);
  scrollTopNum.value = event.target.scrollTop
}

const content = ref()
// 回到顶部按钮的点击事件
function backTop() {
  // console.log(content);
  content.value.scrollTop = 0
}
// ------------------------- 下拉刷新 -------------------------
// 标记有没有在下拉
const downLoading: Ref<boolean> = ref(false)
// 监听下拉刷新的回调函数
function onRefresh() {
  // console.log('下拉了');
  // 标记正在下拉
  downLoading.value = true
  getProList({ count: 1 }).then(res => {

    // 将下拉刷新获取的最新数据放在 proList 中
    proList.value = res.data.data

    // 恢复上拉加载的初始状态
    // 页码恢复到2
    count.value = 2
    // 是否还有更多数据，恢复为有
    finished.value = false
    // 是否标记在上拉加载，恢复为没有加载
    loading.value = false
    // 标记是否在下拉刷新，恢复为没有刷新
    downLoading.value = false
  })
}

//  -------------------------------- 缓存组件的代码 ------------------
onActivated(() => {
  // 进入该组件的时候调用
  // 3. 拿到记录的滚动距离
  scrollTopNum.value = Number(localStorage.getItem('top')) || 0
  // 4.将滚动距离设置到页面中
  content.value.scrollTop = scrollTopNum.value
  // 5. 清除记录的滚动距离
  localStorage.removeItem('top')
})
onDeactivated(() => {
  // 离开该组件的时候调用
  // 1. 获取滚动距离
  // console.log(scrollTopNum.value);

  // 2. 将滚动距离记录下来
  localStorage.setItem('top', String(scrollTopNum.value))
})



</script>
<template>
  <div class="box">
    <header class="header"> 首页 </header>

    <div class="content" ref="content" @scroll="scrollTop">

      <!-- 下拉刷新的组件 -->
      <van-pull-refresh v-model="downLoading" @refresh="onRefresh">

        <!-- 轮播图布局 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
            <img :src="item.img" alt="">
          </van-swipe-item>
        </van-swipe>

        <!-- 宫格布局 -->
        <van-grid column-num="5" :border="false">
          <van-grid-item v-for="item in navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
        </van-grid>

        <!-- 商品布局 -->
        <!-- van-list 上拉加载更多的组件 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <!-- 通过属性传值将 proList 传递到子组件中 -->
          <ProList :proList="proList" />
        </van-list>

        <!-- 下拉刷新的结束标签 -->
      </van-pull-refresh>

      <!-- 回到顶部 -->
      <div class="backTop" @click="backTop" v-show="scrollTopNum > 500">
        <van-icon name="back-top" size="30" />
      </div>

    </div>
  </div>
</template>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 180px;
  height: 180px;
  text-align: center;
  background-color: #39a9ed;
}

.van-swipe-item img {
  width: 100%;
  height: 100%;
}

.backTop {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #f66;
  right: 15px;
  bottom: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
